<template>
  <div class="related">
    <section class="outer">
      <div class="pack">
        <div class="synopsis-top">
          <h3 class="synopsis-h3">喜欢「年少无为」的人也喜欢</h3>
        </div>
      </div>
      <div class="pack d-flex">
        <div class="book-item">
          <div class="book-pic">
            <a href="#">
              <img src="/image/books/1_22.jpg" alt="" />
            </a>
          </div>
          <div class="book-info">
            <h4 class="title">
              <a href="#">处个对象这么费劲吗</a>
            </h4>
            <div class="author">
              <span>余元元</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<style lang="scss">
.outer {
  width: 1200px;
  margin: 0 auto;
  .pack {
    width: 810px;
    margin: 0 auto;
    .synopsis-top {
      width: 100%;
      height: 33px;
      box-sizing: border-box;
      padding: 10px 13px;
      background-color: #eff2f3;
      .synopsis-h3 {
        font-size: 13px;
        color: #333;
      }
    }
  }
}
.pack {
  .book-item {
    width: 115px;
    height: 223px;
    margin-top: 20px;
    .book-pic {
      a {
        img {
          width: 90px;
          height: 134px;
          border-radius: 4px;
          box-shadow: 1px 2px 2px #a6a6a6;
        }
      }
    }
    .book-info {
      width: 110px;
      margin: 17px 36px 0 1px;
      .title {
        margin: 5px 0 0;
        a {
          display: block;
          line-height: 17px;
          text-decoration: none;
          color: #333333;
          font-size: 13px;
          overflow: hidden;
        }
      }
      .author {
        span {
          color: #777777;
          font-size: 12px;
          margin-right: 5px;
        }
      }
    }
  }
}
.related{
  margin-bottom: 150px;
}
</style>